<template>
  <div class="data-table" ref="tbContainer">
    <el-table
      v-bind="$attrs"
      v-on="$listeners"
      v-loading="loading"
      ref="elTable"
      element-loading-text="加载数据中..."
      :data="filteredList || list"
      border
      style="flex-shrink:1"
      sortable="custom"
      highlight-current-row
      @sort-change="onSort"
    >
      <el-table-column v-if="indexColumn" fixed type="index"> </el-table-column>
      <slot></slot>
    </el-table>
    <el-row v-if="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="loadData"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="pageLayout"
        :total="total"
        :current-page.sync="apiSetting.data.pageNo"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import dataTable from "../mixins/dataTable/dataTable";
import pagination from "../mixins/dataTable/pagination";
import sort from "../mixins/dataTable/sort";

export default {
  name: "DataTable",
  props: {
    apiSetting: {
      type: Object,
      required: true
    },
    pagination: {
      type: Boolean,
      default: false
    },
    indexColumn: {
      type: Boolean,
      default: false
    },
    sortColumn: {
      type: Array
    },
    customList: {
      type: Boolean,
      default: false
    }
  },
  mixins: [dataTable, pagination, sort],
  data() {
    return {
      filteredList: null
    };
  },
  methods: {
    search(condition) {
      return new Promise((resolve, reject) => {
        this.filteredList = this.list.filter(item => {
          const keys = Object.keys(condition);
          for (let i = 0; i < keys.length; i++) {
            const key = keys[i];
            if (!item[key].includes(condition[key])) return false;
          }
          return true;
        });
        resolve();
      });
    }
  }
};
</script>

<style scoped>
.el-table >>> .el-button--text {
  font-size: 14px;
}
.el-table >>> .el-button--text:hover > span {
  color: inherit !important;
}
</style>
